<template>
    <div class="headBox">
        <div class="goBack" @click="goBack">
            <span>&lt;&nbsp;&nbsp;GO BACK</span>
        </div>
        <div class="titleArea">
            <p>{{ headData.date }}</p>
            <p>{{ headData.category }}</p>
            <h1 v-html="headData.title"></h1>
        </div>
    </div>
</template>

<script setup>
import {useRouter} from 'vue-router'

defineProps(['headData'])

const router = useRouter()

const goBack = () => {
    router.go(-1)
}
</script>

<style scoped>
.headBox {
    position: relative;
    height: 180px;
}

.goBack span {
    position: absolute;
    top: 0;
    left: 0;
    color: rgb(102, 102, 102);
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
}

.titleArea {
    position: absolute;
    top: 0;
    left: 25%;
}

.titleArea p {
    color: rgb(251, 74, 157);
    font-size: 14px;
    font-weight: bold;
    line-height: 1.5;
}

.titleArea h1 {
    font-size: 45px;
    line-height: 1.2;
    font-weight: bold;
}
</style>